import { Layer, version, Class, Mixin, DomUtil, latLng } from 'leaflet'
const OverlayEchart = (version < '1.0' ? Class : Layer).extend({
    includes: version < '1.0' ? Mixin.Events : [],
    _echartsContainer: null,
    _map: null,
    _echart: null,
    _echartsOption: null,
    initialize(echartsOption) {
        this._echartsOption = echartsOption
    },
    onAdd(map) {
        this._map = map
        this._initEchartsContainer()
        map.on('moveend', this._redraw, this) // 当地图中心改变后触发
        this._redraw()
    },
    onRemove(map) {
        this._echartsContainer && map.getPanes().tilePane.removeChild(this._echartsContainer)
        this._echart.dispose()
        map.off('moveend', this._redraw, this)
    },
    // addTo: function(map) {
    //   console.log(this);
    //   return map.addLayer(this),
    //     this
    // },
    _initEchartsContainer() {
        const size = this._map.getSize()
        const echartsContainer = document.createElement('div')
        // console.log(`=====>mapsize${size}`)
        echartsContainer.style.position = 'absolute'
        echartsContainer.style.height = `${size.y}px`
        echartsContainer.style.width = `${size.x}px`
        echartsContainer.style.zIndex = 999
        this._echartsContainer = echartsContainer
        this._map.getPanes().tilePane.append(this._echartsContainer) // 在map容器的overlayPane上叠加Echarts容器
    },
    _resetCanvasPosition() {
        const bound = this._map.getBounds()
        const origin = this._map.latLngToLayerPoint(bound.getNorthWest())
        // console.log(origin) // 最开始为[0,0]，缩放不会改变，平移会改变\
        DomUtil.setPosition(this._echartsContainer, origin) // 设置Echarts容器的位置，以便与当前地图匹配
    },
    _redraw() {
        return (
            this._resetCanvasPosition(),
            (this._echartsContainer.innerHTML = ''),
            this.initECharts(),
            this.setOption(this._echartsOption),
            this
        )
    },
    clear() {
        ; (this._echartsContainer.innerHTML = ''), (this.echartsOption = {})
    },
    redraw() {
        // console.log('=======>redraw')
        this._redraw()
    },
    initECharts() {
        if (this._echart === null || this._echart === undefined) {
            this._initECharts()
        } else {
            this._echart.dispose()
            this._initECharts()
        }
    },
    _initECharts() {
        if (((this._echart = echarts.init(this._echartsContainer)), echarts.version >= '3.0')) {
            const me = this
            me._echart._geo.prototype.dataToPoint = lnglat => {
                // 重写Echarts内部方法,Ecahrts内部有一套将经纬度转为像素坐标的方法，这里要换成与Leaflet相匹配的
                const latlng = new latLng(lnglat[1], lnglat[0])
                const pixel = me._map.latLngToContainerPoint(latlng)
                return [pixel.x, pixel.y] // 给定地理坐标，返回相对于地图container容器的相应像素坐标。
            }
        }
        this._unbindEvent() // 屏蔽Echarts相关事件
    },
    setOption(echartsOption) {
        if (echartsOption.series) {
            // var series = echartsOption.series || {};
            this._echart.setOption(echartsOption)
        }
    },
    _unbindEvent() {
        echarts.version < '3.0'
            ? (this._echart.getZrender().un('dragstart', () => { }),
                this._echart.getZrender().un('dragend', () => { }),
                this._echart.getZrender().un('mouseup', () => { }),
                this._echart.getZrender().un('mousedown', () => { }),
                this._echart.getZrender().un('mousewheel', () => { }))
            : (this._echart.getZr().off('dragstart', () => { }),
                this._echart.getZr().off('dragend', () => { }),
                this._echart.getZr().off('mouseup', () => { }),
                this._echart.getZr().off('mousedown', () => { }),
                this._echart.getZr().off('mousewheel', () => { }))
    },
})

const overlayEchart = (options) => {
    return new OverlayEchart(options)
}

export default OverlayEchart
export { overlayEchart }
